<template>
  <!-- 对v-model进行拆解 拆解为:value和@change的形式 实现父子组件之间的数据交互 -->
  <!-- :collegeId接收父组件传递过来的学院id filterable启用搜索功能 -->
  <el-select :value="value" :collegeId="collegeId" @change="$emit('input', $event)" filterable placeholder="请输入班级关键词">
    <!-- v-for动态渲染option key为班级id label为班级名 value为班级id -->
    <el-option v-for="item in options" :key="item.id" :label="item.major" :value="item.id"/>
  </el-select>
</template>

<script>
import { getMajorList } from '@/api/college'

export default {
  name: 'MajorSelect', // 选择班级组件
  props: {
    value: [Number, String],
    collegeId: [Number, String]
  },
  data () {
    return {
      options: [] // options内对象的格式为{id:班级号,major:班级名}
    }
  },
  watch: {
    // 监听学院id的变化
    collegeId (val, oldVal) {
      if (val === undefined) return // 进行完新增操作后新值为undefined 不再发送请求
      if (val !== oldVal) this.getMajorList() // 更改了学院 班级需要重新发请求
    }
  },
  methods: {
    // 根据学院id获取班级数据
    async getMajorList () {
      const { data: { data } } = await getMajorList(this.collegeId)
      this.options = data
    }
  }
}
</script>
